<template>
  <div style="height: 83vh; position: relative">
    <div style="position: relative">
      <transition-group name="left">
        <div class="drawer drawerLeft" key="1">
          <div class="title">
            <span>设备报修数据</span>
          </div>
          <div class="content">
            <div class="msgList" :style="{height: listHeight+'px'}">
              <div
                v-for="item in dataList"
                class="listDiv"
                @click="showRep(item, $event)"
              >
                <div class="top">
                  <span class="red"></span>
                  <span>{{ item.typeName }}</span>
                  <el-tag
                    v-if="item.repAcceptState === '01'"
                    class="ml-2"
                    type="warning"
                    >待指派</el-tag
                  >
                  <el-tag
                    v-else-if="item.repAcceptState === '02'"
                    class="ml-2"
                    type="warning"
                    >待领取</el-tag
                  >
                  <el-tag
                    v-else-if="item.repAcceptState === '03'"
                    class="ml-2"
                    type="danger"
                    >待维修</el-tag
                  >
                  <el-tag v-else-if="item.repAcceptState === '04'" class="ml-2"
                    >待验收</el-tag
                  >
                  <el-tag
                    v-else-if="item.repAcceptState === '05'"
                    class="ml-2"
                    type="success"
                    >已完结</el-tag
                  >
                  <el-tag
                    v-else-if="item.repAcceptState === '06'"
                    class="ml-2"
                    type="info"
                    >挂起</el-tag
                  >
                </div>
                <div>
                  <table style="font-size: 14px; border-spacing: 10px">
                    <tr>
                      <td style="width: 70px; color: #7f7f7f">报修时间：</td>
                      <td
                        style="
                          font-family: 'HarmonyOS_Sans_SC', 'HarmonyOS Sans SC',
                            sans-serif;
                        "
                      >
                        {{ item.createTime }}
                      </td>
                    </tr>
                    <tr>
                      <td style="width: 70px; color: #7f7f7f">报修区域：</td>
                      <td>{{ item.region }}</td>
                    </tr>
                    <tr>
                      <td style="width: 70px; color: #7f7f7f">图片：</td>
                      <td>
                        <a href="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" target="_blank">照片.jpg</a>
                      </td>
                    </tr>
                    <tr>
                      <td style="width: 70px; color: #7f7f7f">问题类型：</td>
                      <td>{{ item.problemType }}</td>
                    </tr>
                    <tr>
                      <td style="width: 70px; color: #7f7f7f">问题描述：</td>
                      <td>
                        <div
                          style="
                            width: 248px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                          "
                        >
                          {{ item.problemDesc }}
                        </div>
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="searchInput">
          <el-input
            v-model="searchData"
            placeholder="搜索定位设备编号"
            class="input-with-select"
          >
            <template #append>
              <el-button :icon="Search" @click="toSearch" />
            </template>
          </el-input>
        </div>
        <el-radio-group v-model="layer" :class="'btnLayer'">
          <el-radio-button
            v-for="area in areaDetail"
            :label="area.buildName"
            @change="showFloor(area.floorDesc)"
            :key="area"
          >
            {{ area.buildName }}
          </el-radio-button>
        </el-radio-group>
        <el-radio-group v-model="subLayer" v-show="hasSub" :class="'subLayer'">
          <el-radio-button
            v-for="area in subLayers"
            :label="area.buildName"
            @change="switchMap(area.name)"
            :key="area"
          >
            {{ area.buildName }}
          </el-radio-button>
        </el-radio-group>
      </transition-group>
    </div>
    <map-control @mapClick="mapClick" @mapLoad="mapLoadEvent"></map-control>
  </div>
  <process-tracing
    :processTracingVisible="processTracingVisible"
    :mainForm="processTracingData"
    @close="closeProcessTracing"
    @getListData="getData"
  ></process-tracing>
</template>

<script lang="ts" setup>
import { ref, reactive, onBeforeMount, watch } from "vue";
import { areaDetail } from "@/config/config";
import { Search } from "@element-plus/icons-vue";
import { reqList } from "@/api/monitor/repair";
import processTracing from "./processtracing.vue";

// 以下3个为地图控件相关的组件
import mapControl from "@/components/map/index.vue";
import { store } from "@/components/map/mapStore";
import { image } from "@/assets/index";

//搜索条件
const searchData = ref("");
const toSearch = async () => {
  if (searchData.value) {
    await getData({ eqptCode: searchData.value, queryType:'06'});
  } else {
    await getData({queryType:'06'});
  }

  drawTextLayer(dataList.value);
};
const listHeight = ref(620)
const dataList = ref([]); //数据列表
/**
 * @functionName getData
 * @param {对象} data
 * @description 获取所有的数据
 * @author 彭庆楠
 * @date 2023-09-12 17:05:00
 * @version V1.0.0
 * @return
 */
const getData = async (data) => {
  await reqList(data).then((res) => {
    let data = res.data.filter((e) => {
      if (
        e.repAcceptState === "01" ||
        e.repAcceptState === "02" ||
        e.repAcceptState === "03" ||
        e.repAcceptState === "04"||
        e.repAcceptState === "05"||
        e.repAcceptState === "06"
      ) {
        return e;
      }
    });
    dataList.value = data;
  });
};
// 用于保存机场层级
const layer = ref('全览');
// 用于保存选择的机场子层级
const subLayer = ref();
// 用于保存机场子层级数组
const subLayers = ref([]) as any;
// 是否显示机场子层级
const hasSub = ref(false);
const showFloor = (val: string[]) => {
  if (val !== undefined) {
    subLayers.value = val;
    hasSub.value = true;
  } else {
    switchMap('咸阳大场景融合地图')
    hasSub.value = false;
  }
};
/**
 * @functionName 分区图层切换
 * @param {类型} 参数
 * @description
 * @author 彭庆楠
 * @date 2023-09-11 14:12:33
 * @version V1.0.0
 * @return
 */
const switchMap = (name: string) => {
  store.BNMap.switchDCJ(name, () => {
    // 一般为调用setCenter和setLevel方法
  });
};
var lableLayer = null;
const mapLoadEvent = () => {
  lableLayer = store.BNMap.creatGraphicsLayer({ id: "lableLayer" });
};
const showPoint = ref();
/**
 * @functionName 创建报警点位
 * @param {数组} points
 * @description
 * @author 彭庆楠
 * @date 2023-09-11 17:10:44
 * @version V1.0.0
 * @return
 */
const drawTextLayer = (points: any) => {
  const markerSymbol = store.BNSymbol.PictureMarkerSymbol(
    image.flashing,
    14,
    14
  );

  // 数据拆分和数据处理根据具体情况进行修改
  store.BNMap.removeGraphicsLayer("lableLayer");
  // 向地图添加临时图层
  lableLayer.removeAll();
  points.forEach((p) => {
    if (p.coordinate) {
      // 创建点
      const point = store.BNMap.createPoint({
        x: p.coordinate.longitude,
        y: p.coordinate.latitude,
        spatialReference: store.BNMap.spatialReference,
      });
      // 文字样式
      const textSymbol = {
        type: "text",
        color: "#00FFFF",
        haloColor: "black",
        haloSize: "1px",
        text: p.typeName,
        xoffset: 5, //x轴上的偏移
        yoffset: 10,
        font: {
          size: 10,
        },
      };

      //创建graphic
      const pointGraphic = store.BNMap.graphic(point, textSymbol);
      const markerGraphic = store.BNMap.graphic(point, markerSymbol);
      markerGraphic.attributes = {
        REPID: p.repId,
        NAME: p.creator.organName ? p.creator.organName : "-",
        PERSON: p.creator.name ? p.creator.name : "-",
        TELPHONE: p.creator.phone ? p.creator.phone : "-",
        TIME: p.createTime ? p.createTime : "-",
        URGENCY: p.urgency ? p.urgency : "-",
        TERMINAL: p.terminal ? p.terminal : "-",
        FLOOR: p.eqptFloor ? p.eqptFloor : "-",
        REGION: p.region ? p.region : "-",
        TYPENAME: p.typeName ? p.typeName : "-",
        PROBLEMTYPE: p.problemType ? p.problemType : "-",
        PROBLEMDESC: p.problemDesc ? p.problemDesc : "-",
        FILES: p.files,
        REMARKS: p.remarks ? p.remarks : "-",
        ALL: p,
      };
      lableLayer.add(pointGraphic);
      lableLayer.add(markerGraphic);

      const myLayer = lableLayer.graphics.items[1];
      if (lableLayer.graphics.items.length <= 2) {
        showPoint.value = markerGraphic.attributes.ALL;
        //地图中心移动所选安检口
        store.BNMap.setCenter(point);
        //展示弹窗
        store.BNWindows.show(point);
      }
      //弹窗显示内容
      var html = mapDialog(myLayer);
      //设置弹窗内容
      store.BNWindows.setTitle("基本信息");
      store.BNWindows.setContent(html);
      // 设置弹窗大小
      store.BNWindows.resize(280, 360);
      store.BASE.addHtml(
        "txtDiv",
        "<div style='width:100%'><span style='display: inline-block;width:320px'></span><a href='#' class='more'>查看完整信息></a></div></div>"
      );
      // 考虑到弹窗中可能存在多个控件，建议将控件的class放入数组中
      const classs = ["testTxt"];
      store.BASE.getValue("more", classs, "test");
    }
  });
  //绑定点击事件
  store.BNMap.bindEvent("lableLayer", "click", function (evt) {
    if (evt.clickResult !== null) {
      const myLayer = lableLayer.graphics.items.filter(function (result) {
        if (result.attributes != undefined) {
          return (
            result.attributes.REPID ===
            evt.clickResult.results[0].graphic.attributes.REPID
          );
        }
      })[0];
      store.BNWindows.setTitle("基本信息");
      var html = mapDialog(myLayer);
      store.BNWindows.setContent(html);
      // 设置弹窗大小
      store.BNWindows.resize(50, 50);
      store.BNWindows.show(evt.mapPoint);
      console.log(myLayer.attributes.ALL);

      showPoint.value = myLayer.attributes.ALL;
      console.log(store);
      store.BASE.addHtml(
        "txtDiv",
        "<div style='width:100%'><span style='display: inline-block;width:320px'></span><a href='#' class='more'>查看完整信息></a></div></div>"
      );
      // 考虑到弹窗中可能存在多个控件，建议将控件的class放入数组中
      const classs = ["testTxt"];
      store.BASE.getValue("more", classs, "test");
      // lableLayer.graphics.items.forEach((result) => {
      //   if (result.attributes != undefined) {
      //     if (result != myLayer) {
      //       result.symbol = markerSymbol;
      //     }
      //   }
      // });
    }
  });
  function mapDialog(myLayer) {
    var htmlStart =
      "<table style='width: 100%;font-size:14px;'>" +
      "<tr><td>上报单位:</td><td>" +
      myLayer.attributes.NAME +
      "</td><td>上报人:</td><td>" +
      myLayer.attributes.PERSON +
      "</td></tr>" +
      "<tr><td>联系电话:</td><td>" +
      myLayer.attributes.TELPHONE +
      "</td><td>上报时间:</td><td>" +
      myLayer.attributes.TIME +
      "</td></tr>" +
      "<tr><td>紧急状况:</td><td>";
      if(myLayer.attributes.URGENCY === '1'){
        htmlStart = htmlStart + "非常紧急";
      }else if(myLayer.attributes.URGENCY === '2'){
        htmlStart = htmlStart + "一般紧急";
      }else if(myLayer.attributes.URGENCY === '3'){
        htmlStart = htmlStart + "一般";
      }
      
      htmlStart = htmlStart + "</td><td>航站楼:</td><td>" +
      myLayer.attributes.TERMINAL +
      "</td></tr>" +
      "<tr><td>楼层:</td><td>" +
      myLayer.attributes.FLOOR +
      "</td><td>位置:</td><td>" +
      myLayer.attributes.REGION +
      "</td></tr>" +
      "<tr><td>设备类型:</td><td>" +
      myLayer.attributes.TYPENAME +
      "</td><td style='width:70px'>问题类型:</td><td>" +
      myLayer.attributes.PROBLEMTYPE +
      "</td></tr>" +
      "<tr><td>问题描述:</td><td colspan='3' style='word-break:break-all;'>" +
      myLayer.attributes.PROBLEMDESC +
      "</td></tr>" +
      "<tr><td style='width:70px'>图片:</td><td colspan='3'>";
    var htmlContent = "";
    if (!myLayer.attributes.FILES) {
      for (let i = 0; i <= 4; i++) {
        htmlContent +=
          "<img src='" +
          "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" +
          "'alt style='margin-right:10px;width:60px' />";
      }
    } else {
      htmlContent =
        "<img src='https://files.axshare.com/gsc/34PH56/6d/ff/fa/6dfffae9ffb841329b60d1130952d728/images/航站楼运行数据可视化/u1065.svg?pageId=39c5efc2-78bb-470d-9639-56e88cb59fb0' alt style='margin-left:10px' />";
    }
    var htmlEnd =
      "</td></tr>" +
      "<tr><td>备注:</td><td>" +
      myLayer.attributes.REMARKS +
      "</td></tr>" +
      "</table>" +
      "<div style='width:100%'><span style='display: inline-block;width:320px'></span><div class='txtDiv'></div></div></div>";
    return htmlStart + htmlContent + htmlEnd;
  }
  store.BNMap.addGraphicsLayer(lableLayer);
};
window["test"] = (val) => {
  test(val);
};
const test = (val) => {
  console.log(11);

  showProcessTracing(showPoint.value);
};
const selectedDiv = ref();

const showRep = (item, event) => {
  if(selectedDiv.value){
    selectedDiv.value.style.backgroundColor="#f5f8ff"
  }
  event.currentTarget.style.backgroundColor="#488bef"
  selectedDiv.value = event.currentTarget
  let point = [];
  point.push(item);
  drawTextLayer(point);
};

const processTracingData = reactive<any>({});
const processTracingVisible = ref(false);
/**
 * 流程追踪点击
 */
const showProcessTracing = (data: any) => {
  processTracingData.value = data;
  processTracingVisible.value = true;
};
/**
 * 流程追踪关闭弹窗
 */
const closeProcessTracing = () => {
  processTracingVisible.value = false;
};

onBeforeMount(() => {
  getData({queryType:'06'});
});
</script>
<style lang="less" scoped>
.drawer {
  height: 680px;
  padding-top: 10px;
  margin-top: 10px;
  margin-left: 10px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 999;
  background-color: #fff;
  float: left;
}
.drawerLeft {
  width: 400px;
  position: absolute;
  top: 0;
  left: 0;
}

.drawer > .title {
  line-height: 32px;
  height: 32px;
  margin-bottom: 10px;
  padding-right: 15px;

  span {
    display: inline-block;
    height: 14px;
    line-height: 14px;
    text-indent: 1em;
    font-size: 18px;
    color: #000;
  }
}
.drawer > .content {
  line-height: 32px;
  height: 140px;
  margin-bottom: 10px;
  padding: 0 10px 10px;
  position: relative;

  /deep/ .el-form-item__label {
    text-align: left;
    width: 85px !important;
    padding: 0;
    display: inline-block;
  }

  /deep/ .el-form-item {
    margin-bottom: 5px;
  }

  /deep/ .filter-wrapper {
    display: inline-block;
  }

  /deep/ .button-group {
    width: 200px;
    position: absolute;
    top: 110px;
    left: 40px;
  }
}
.subLayer {
  position: absolute;
  width: 35px;
  top: calc(85vh - 285px);
  right: 10px;
  border: 0;
}

.subLayer /deep/ .el-radio-button .el-radio-button__inner {
  width: 35px;
  border: 1px #fff solid;
  padding: 10px;
}

.subLayer /deep/ .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 6px 6px 0 0;
}

.subLayer /deep/ .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 0 6px 6px;
}
.btnLayer {
  position: absolute;
  top: calc(85vh - 85px);
  right: 10px;
  border: 0;
  transition: left 1s;
  transition-timing-function: linear;
}

.msgList {
  overflow-y: scroll;
  // height: 580px;
}
.msgList::-webkit-scrollbar {
  display: none;
}
.listDiv {
  border-radius: 8px;
  font-size: 14px;
  padding: 8px;
  max-height: 350px;
  overflow-y: hidden;
  margin-bottom: 10px;
  background-color: rgba(245, 248, 255, 1);
  .top {
    width: 100%;
    height: 24px;
    line-height: 24px;
    vertical-align: center;
  }
  .top span {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    text-indent: 5px;
    float: left;
    border: 0;
  }
  .top span img {
    margin-top: 2px;
  }
  .top span:first-child {
    font-weight: bolder;
    text-indent: 2px;
    text-align: left;
  }
  .top span:last-child {
    float: right;
    text-align: right;
  }
  .list {
    line-height: 14px;
    max-height: 60px;
    overflow-y: scroll;
  }
  .list::-webkit-scrollbar {
    display: none;
  }
  .msg {
    color: #aaa;
    display: inline-block;
    height: 20px;
    line-height: 20px;
  }
}
.searchInput {
  position: absolute;
  width: 200px;
  height: 20px;
  top: 10px;
  left: 420px;
}
.searchInput /deep/ .el-input-group__append button.el-button {
  background-color: rgba(72, 139, 239, 1);
  color: white;
}
/*闪烁效果*/
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.event-alert {
  animation: 1s blink infinite;
}
.red {
  border-radius: 10px;
  background: #e30202;
  width: 16px;
  height: 16px !important;
  position: relative;
  top: 3px;
  margin-right: 24px;
}
</style>
